.context-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -999;
   

    .context-menu-wrapper {
        position: relative;
        width: 100%;
        height: 100%;

        .context-menu-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 300px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0px 6px 16px 8px rgba(0, 0, 0, 0.04), 0px 9px 28px 0px rgba(0, 0, 0, 0.03), 0px 12px 48px 16px rgba(0, 0, 0, 0.015);
            border: 1px solid #e7e9e8;
            z-index: -999;
            opacity: 0;
        }
    }
}

.context-menu-overlay.show {
    z-index: 199999;
    display: block !important;

    .context-menu-wrapper {
        .context-menu-content {
            z-index: 10001;
            opacity: 1;
        }
    }

}
.context-menu-overlay.hide {
    display: none !important;
    // background-color: red;
}

.context-menu-content-without-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 300px;
    background-color: #fff;
    border-radius: 5px;
    // box-shadow: 0px 3px 2px 2px rgba(0,0,0,0.06), 0px 3px 3px 0px rgba(0,0,0,0.06), 0px 3px 3px 2px rgba(0, 0, 0, 0.025);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    border: 1px solid #d6d9d6;
    z-index: -999;
}

.context-menu-content-without-overlay.hide {
    z-index: -999 !important;
    display: none;
}

.context-menu-content-without-overlay.show {
    z-index: 10003;
    display: block;
    pointer-events: all !important;
    // background-color: blue;
}

.context-menu-container {
    width: 100%;
    padding: 3px;
}

.context-menu-item {
    user-select: none;
    width: 100%;
    height: 36px;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all ease 0.25s;
    padding: 0 9px;

    .context-menu-item-left {
        flex: 1;
        height: 100%;
        justify-content: flex-start;
        align-items: center;
        pointer-events: none;

        .context-menu-item-icon {
            width: 24px;
            height: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 3px;
            pointer-events: none;

            i {
                font-size: 14px;
                font-weight: 500;
            }
        }

        .context-menu-item-title {
            font-size: 14px;
            color: #262626;
        }
    }

    .context-menu-item-right {
        pointer-events: none;

        .context-menu-item-right-icon {
            width: 24px;
            height: 24px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            pointer-events: none;

            i {
                font-size: 14px;
                transform: rotateZ(-90deg);
            }
        }
    }
}

.context-menu-item:hover {
    background-color: #f2f2f2;
    border-radius: 5px;
}

.context-menu-item-border {
    height: 1px;
    width: calc(100% - 12px);
    margin: 0 auto;
    border-bottom: 1px solid #eee;
    margin-top: 3px;
    margin-bottom: 4px;
}


.sub-context-menu-container {
    position: fixed;
    left: -1000px;
    top: 0;
    width: 200px;
    z-index: -999;
    border-radius: 8px;
    box-shadow: 0px 6px 16px 8px rgba(0, 0, 0, 0.04), 0px 9px 28px 0px rgba(0, 0, 0, 0.03), 0px 12px 48px 16px rgba(0, 0, 0, 0.015);
    border: 1px solid #e7e9e8;
    background-color: #fff;
    padding: 3px;
    overflow: hidden;
    box-sizing: border-box;
    user-select: none;
}

.context-menu-item-disable {
    opacity: 0.72;
    cursor: not-allowed;
    pointer-events: none;
}

.word-editor-context-menu-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    // height: 300px;
    // background-color: #fff;
    // transition:  all ease 0.1s;
    z-index: -999;
    display: none;
}

.word-editor-context-menu-container.show {
    z-index: 10001;
    display: block;
}

.word-edit-context-menu-inline-style {
    width: 242px;
    height: 56px;
    margin-bottom: 18px;
}

.context-menu-outline {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    border: 1px solid #d6d9d6;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
}